<template>
  <section class="pb-fix">
    <div class="container-box">
      <header class="header">
        <div class="flex-l">
          <div class="icon back">
            <img src="@/assets/image/back.png" alt="" @click="onRoute('/quotes/openTrade')">
          </div>
          <span class="title">{{ t('历史委托') }}</span>
        </div>
        <div class="icon-group">
          <div class="icon refresh">
            <img src="@/assets/image/quotes/refresh.png" alt="">
          </div>
          <div class="icon search" @click="onRoute('/exchangeHistory/search')">
            <img src="@/assets/image/optional/search.png" alt="">
          </div>
        </div>
      </header>
      <section class="tab-container">
        <van-tabs v-model:active="tabActive">
          <van-tab title="近7日" />
          <van-tab title="近30日" />
          <van-tab title="自定义" />
        </van-tabs>
        <div class="select-date-container flex" v-if="tabActive === 2">
          <div class="flex-l">
            <div class="flex-l-item" @click="showCalendar = true">
              <span>{{ startTime }}</span>
            </div>
            <span class="symbol">～</span>
            <div class="flex-l-item" @click="showCalendar = true">
              <span>{{ endTime }}</span>
            </div>
          </div>
          <div class="flex-r">
            <van-button type="primary" size="small">确定</van-button>
          </div>
          <van-calendar v-model:show="showCalendar" type="range" @confirm="onConfirm" :confirm-text="$t('confirm')"
            :confirm-disabled-text="$t('confirm')" :formatter="formatter" :title="$t('selectDate')" :min-date="minDate"
            :max-date="maxDate" />
        </div>
        <HistoricalEntrustTab ref="tabRef" :tabActive="tabActive" :startTime="startTime" :endTime="endTime" />
      </section>
    </div>
  </section>
</template>
    
<script setup>
import { ref, onMounted, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  contractOrder
} from "@/service/trade.api.js";
import { _getQuotes } from '@/service/quotes.api'
import { useI18n } from 'vue-i18n'
import HistoricalEntrustTab from './components/HistoricalEntrustTab.vue'
import dayjs from 'dayjs';

const { t } = useI18n()
const router = useRouter()
const tabRef = ref()
const tabActive = ref(0)
const minDate = ref(new Date(new Date().getFullYear(), 0, 1));
const maxDate = ref(new Date());
const showCalendar = ref(false)   // 自定义日期筛选组件
const startTime = ref(dayjs().add(-90, 'd').format('YYYY-MM-DD')) // 默认最近三个月
const endTime = ref(dayjs().format('YYYY-MM-DD'))

onMounted(async () => {


})

onBeforeMount(() => {

})

const onRoute = (path) => {
  router.push({
    path,
    query: {
      tabActive: 3
    }
  })
}
const onConfirm = (prop) => {
  startTime.value = dayjs(prop[0]).format('YYYY-MM-DD')
  endTime.value = dayjs(prop[1]).format('YYYY-MM-DD')
  tabRef.value.getOrderList()
  showCalendar.value = false
}

</script>
<style lang="scss" scoped>
:deep(.van-tabs__nav) {
  background: $selectSymbol_background;
}

:deep(.van-tab) {
  font-size: 14px;
  color: $text_color;
  font-weight: 400;
}

:deep(.van-tab.van-tab--active) {
  font-weight: 700;
}


.container-box {
  .header {
    position: relative;
    display: flex;
    height: 28px;
    padding: 0 12px;

    .flex-l {
      flex: 1;
      display: inline-flex;

      .icon {
        display: inline-block;
        width: 24px;
        height: 28px;
        padding: 6px 4px;

        img {
          height: 20px;
          width: 20px;
        }
      }
    }

    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      flex: 1;
      text-align: center;
      font-weight: 700;
      font-size: 16px;
      line-height: 28px;
      color: $mainTextColor;
    }

    .icon-group {
      text-align: right;

      .icon {
        display: inline-block;
        width: 28px;
        height: 28px;
        padding: 4px;
        margin-left: 16px;
      }
    }


  }

  .tab-container {
    margin-top: 8px;
  }

  .select-date-container {
    margin-top: 8px;
    padding: 0 30px;
    justify-content: space-between;

    .flex-l {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 12px;

      .flex-l-item {
        border: 1px solid $border_color;
        border-radius: 2px;
        padding: 2px 8px;
      }

      .symbol {
        margin: 0 10px;
      }
    }

    .flex-r {
      width: 80px;
      text-align: right;
    }
  }


}
</style>